<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#top_content{
				width: 100%;
				height: 200px;
				border: 1px solid transparent;
				text-align: center;
				line-height: 200px;
				background-color: #eee;
			}
			#sticky{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: black;
				color: #fff;
				text-align: center;
			}
			#main_content{
				height: 7028px;
			}
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script>
			$(function(){
				//JQ相关操作 思路:滚动下拉条 超过200px 钉死在页面上
				//超过200px 固定>滚动 吸顶灯通过添加样式操作  定死页面上
				//固定值：获取到大吸顶灯位置的偏移量
				//offset() 获取或设置元素相对于文档偏移值
				//.top  获取body顶部
				var so=$("#sticky").offset().top;
				//$(window) 来监听窗口的事件：滚动 窗口大小  
				//.scroll()  监听页面滚动事件
				$(window).scroll(function(){
					//超过200px
					//获取页面滚动值 动态值  scrollTop()获取滚动位置【动态值】
					var st=$(window).scrollTop();
					//超过200px 动态值>固定值200  条件满足 页面吸顶灯样式顶死
					if(st>so){
						$("#sticky").addClass("ac");
					}else{
						$("#sticky").removeClass("ac");
					}
				});
			});
			
		</script>
	</head>
	<body>
		<div id="top_content">顶部内容区域</div>
		<div id="sticky">我是吸顶元素</div>
		<div id="main_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi quos illo autem deserunt iusto voluptatem est quo, eius incidunt atque qui quibusdam magnam nisi! Placeat harum atque laudantium eligendi animi.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur cupiditate exercitationem tempora laudantium rerum voluptates. Ipsam optio, iure, blanditiis vel illum fugiat alias fuga, quibusdam quis iste odio. Dolor, sint?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, minima hic. Iste explicabo, itaque eos nihil consequatur molestiae, quidem voluptatibus eaque reiciendis ducimus dolores perspiciatis illum aspernatur! Dolorem, consequuntur pariatur.</div>
		
		
	</body>
</html>